<template>
  <el-card class="appointment-card" :class="getStatusClass(appointment.status)">
    <div class="patient-info">
      <el-avatar :size="50" :src="appointment.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
      <div class="info-text">
        <h3>{{ appointment.patientName }} <span class="age-gender" v-if="appointment.age && appointment.gender">{{ appointment.age }}岁 {{ appointment.gender }}</span></h3>
        <p v-if="appointment.department">科室：{{ appointment.department }}</p>
        <p v-if="appointment.phone">电话：{{ appointment.phone }}</p>
        <p>预约时间：{{ appointment.createTime }}</p>
        <p>过期时间：{{ appointment.expireTime }}</p>
      </div>
      <el-tag :type="getStatusType(appointment.status)">{{ getStatusText(appointment.status) }}</el-tag>
    </div>
    <div class="card-footer">
      <el-button size="small" @click="handleShowDetail">详情</el-button>
      <el-button
        v-if="appointment.status === 'PENDING'"
        type="primary"
        size="small"
        @click="handleStartConsultation"
      >立即接诊</el-button>
      <el-button
        v-if="appointment.status === 'PENDING'"
        type="danger"
        size="small"
        @click="handleRejectAppointment"
      >拒绝</el-button>
      <el-button
        size="small"
        type="info"
        :disabled="appointment.isRead"
        @click="handleMarkAsRead"
      >{{ appointment.isRead ? '已读' : '标记已读' }}</el-button>
      <el-button
        size="small"
        type="warning"
        @click="handleDeleteAppointment"
      >删除</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

// 定义组件接收的属性
const props = defineProps<{
  appointment: {
    id: number;
    userId: number;
    patientName: string;
    phone: string;
    status: string;
    appointmentTime?: string;
    createTime: string;
    expireTime: string;
    rejectTime: string | null;
    isRead: boolean;
    avatar?: string;
    gender?: string;
    age?: number;
    department?: string;
    doctorName?: string;
  }
}>()

// 定义组件发出的事件
const emit = defineEmits<{
  'show-detail': [appointment: typeof props.appointment];
  'start-consultation': [appointment: typeof props.appointment];
  'reject-appointment': [appointment: typeof props.appointment];
  'mark-as-read': [appointment: typeof props.appointment];
  'delete-appointment': [appointment: typeof props.appointment];
}>()

// 获取状态对应的样式类
const getStatusClass = (status: string) => {
  return {
    'status-waiting': status === 'waiting' || status === 'PENDING',
    'status-ongoing': status === 'ongoing',
    'status-cancelled': status === 'cancelled' || status === 'REJECTED' || status === 'TIMEOUT',
    'status-completed': status === 'completed'
  }
}

// 获取状态对应的类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    waiting: 'info',
    ongoing: 'success',
    cancelled: 'danger',
    completed: 'warning',
    PENDING: 'info',
    REJECTED: 'danger',
    TIMEOUT: 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取状态对应的文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    waiting: '等待中',
    ongoing: '进行中',
    cancelled: '已取消',
    completed: '已完成',
    PENDING: '待处理',
    REJECTED: '已拒绝',
    TIMEOUT: '已超时'
  }
  return statusMap[status] || '未知状态'
}

// 事件处理函数
const handleShowDetail = () => {
  emit('show-detail', props.appointment)
}

const handleStartConsultation = () => {
  emit('start-consultation', props.appointment)
}

const handleRejectAppointment = () => {
  emit('reject-appointment', props.appointment)
}

const handleMarkAsRead = () => {
  emit('mark-as-read', props.appointment)
}

const handleDeleteAppointment = () => {
  emit('delete-appointment', props.appointment)
}
</script>

<style scoped>
.appointment-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s;
}

.appointment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.patient-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.info-text {
  flex: 1;
  margin: 0 15px;
}

.info-text h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.age-gender {
  font-size: 14px;
  color: #666;
  margin-left: 10px;
  font-weight: normal;
}

.info-text p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.status-waiting {
  border-left: 4px solid #909399;
}

.status-ongoing {
  border-left: 4px solid #67C23A;
}

.status-cancelled {
  border-left: 4px solid #F56C6C;
}

.status-completed {
  border-left: 4px solid #E6A23C;
}
</style>
